<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入axios -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <title>axios源码学习</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .container {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="btn btn-primary">发生GET请求 </button>
        <button class="btn btn-warning">发生POST请求 </button>
        <button class="btn btn-success">发生PUT请求 </button>
        <button class="btn btn-danger">发生DELETE请求 </button>
        <button class="btn btn-info">取消请求 </button>
        <hr />
        <h4>数据回显</h4>
        <p id="content"></p>
    </div>
    <script>
        const btn_group = document.querySelectorAll('button')
        const content = document.getElementById('content')
       
        btn_group[0].onclick = function () {
        axios_instance.request({
            method: 'get',
            url: '/posts',
            // params: {
            //     id: 2
            // }
        }).then(function (response) {
            console.log(response);
            content.innerHTML = JSON.stringify(response.data)
        }).catch(function (error) {
            console.log(error);
        });
        // 第一种写法：axios.get(url[, config])
        axios_instance.get('/posts?id=1')
            .then(function (response) {
                console.log(response);
                content.innerHTML = JSON.stringify(response.data)
            }).catch(function (error) {
                console.log(error);
            });

        axios_instance.get('/posts', {
            params: {
                id: 1
            },
            // headers: {'X-Requested-With': 'XMLHttpRequest'},
        })
            .then(function (response) {
                console.log(response);
                content.innerHTML=JSON.stringify(response.data)
            }).catch(function (error) {
                console.log(error);
            });
        // 第二种写法：axios(config)
        axios_instance({
            method: 'get',
            url: '/posts',
            params: {
                id: 1
            }
        }).then(function (response) {
            console.log(response);
            content.innerHTML = JSON.stringify(response.data)
        }).catch(function (error) {
            console.log(error);
        });
        // 第三种写法：axios(url[, config])
        axios_instance('/posts/1')
            .then(function (response) {
                console.log(response);
                content.innerHTML = JSON.stringify(response.data)
            }).catch(function (error) {
                console.log(error);
            });
        }
        btn_group[1].onclick = function () {
            // 发送了post请求，后台数据db.json也成功保存了数据，
            // 但是使用开发者工具network选项卡看不到http请求数据，
            // 看现象感觉是被刷新了，post记录直接消失。
            // 解决办法：F12——勾上Preserve log
            // 第一种写法：axios.post(url[, data[, config]])
            axios_instance.post('/posts', {
                // `data` 是作为请求主体被发送的数据
                title: '我去上学啦',
                author: '困困'
            }, {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
            // 第二种写法：axios(config)
            // axios_instance({
            //     url: '/posts',
            //     method: 'POST',
            //     data: {
            //         title: '我去上学啦',
            //         author: '困困2'
            //     }
            // }).then(function (response) {
            //     console.log(response);
            // }).catch(function (error) {
            //     console.log(error);
            // });
        }
        btn_group[2].onclick = function () {
            // 第一种写法：axios.put(url[, data[, config]])
            axios_instance.put('/posts/1', {
                title: '哈哈，我去上学啦',
                author: '困困'
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
            // 第二种写法：axios(config)
            // axios_instance({
            //     url: '/posts/1',
            //     method: 'put',
            //     data: {
            //         title: '我去上学啦',
            //         author: '困困2'
            //     }
            // }).then(function (response) {
            //     console.log(response);
            // }).catch(function (error) {
            //     console.log(error);
            // });
        }
        btn_group[3].onclick = function () {
            // 第一种写法：axios.delete(url[, config]])
            axios_instance.delete('/posts/1').then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error);
            });
            // 第二种写法：axios(config)
            // axios_instance({
            //     url: '/posts/1',
            //     method: 'delete',
            // }).then(function (response) {
            //     console.log(response);
            // }).catch(function (error) {
            //     console.log(error);
            // });
        }
        btn_group[4].onclick = function () {
            source.cancel('取消啦')
        }
    </script>
</body>

</html>